<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入wow.js样式文件 -->
    <link rel="stylesheet" href="./css/animate.min.css">
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.ttf?t=1695194129531') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 18px;
            color: #848484;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <div class="header">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand wow rollIn bg-red" href="#">
                                <img src="./images/logo.png" alt="">
                            </a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right wow bounceInDown bg-green">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">走进尚典</a></li>
                                <li><a href="#">新闻动态</a></li>
                                <li class="active"><a href="#">VIDEO</a></li>
                                <li><a href="#">产品中心</a></li>
                                <li><a href="#">授权查询</a></li>
                                <li><a href="#">联系我们</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="baner">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img decoding="async" src="./images/img.png" alt="First slide" width="100%">
                </div>
                <div class="item">
                    <img decoding="async" src="./images/img.png" alt="Second slide" width="100%">
                </div>
                <div class="item">
                    <img decoding="async" src="./images/img.png" alt="Third slide" width="100%">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!-- 内容 -->
    <div class="center">
        <div class="container">
            <div class="row">
                <div class="center_nav">
                    <span class="iconfont wow rollIn bg-red" data-wow-delay="0.5s">&#xe607;</span>
                    <span class="wow rollIn bg-red" data-wow-delay="0.5s">视频中心</span>
                    <div class="center_nav_right wow lightSpeedIn bg-purple">
                        <span>当前位置:</span>
                        <span>首页&gt;</span>
                        <span>尚典视频</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="box">
            <div class="container">
                <div class="row">

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian">
                            <img src="./images/1.png" alt="">
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box  mian">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian ">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian ">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian ">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian ">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-md-4 wow bounceInDown bg-green">
                        <div class="center_box mian">
                            <img src="./images/2_03.png" alt="">
                            <div class="box_font">
                                <p>为了美丽离不开洗发水的使用</p>
                                <p>2016/07/22</p>
                            </div>
                        </div>
                    </div>
                    

                </div>
            </div>
        </div>


        <!-- 分页 -->
        <div class="center_bottom wow bounceInDown bg-green">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#" class="pagination1">...</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>

    </div>




    <!-- 底部 -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-xs-12 col-sm-6 col-md-2">
                    <div class="left_img wow rollIn bg-blue">
                        <img src="./images/5尚典视频页-_11.png" class="center-block" alt="">
                    </div>
                </div>

                <div class="col-lg-3 col-xs-12 col-sm-6 col-md-3">
                    <div class="footer_box">
                        <div class="box1">
                            <p class="wow bounceInDown bg-green">导航 NAVIGATION</p>
                            <div class="footer_left wow bounceInDown bg-green">
                                <ul>
                                    <li>网站首页</li>
                                    <li>新闻动态</li>
                                    <li>产品中心</li>
                                    <li>联系我们</li>
                                </ul>
                            </div>

                            <div class="footer_right wow bounceInDown bg-green">
                                <ul>
                                    <li>走进尚典</li>
                                    <li>尚典视频</li>
                                    <li>授权查询</li>
                                </ul>
                            </div>
                        </div>
                       
                    </div>
                </div>

                <div class="col-lg-5 col-xs-12 col-sm-7 col-md-5">
                    <div class="footer_txt wow bounceInDown bg-green">
                        <p>联系 CONTACT</p>
                        <p>地址：广州市海珠区赤岗街道新市头路锦安苑锦豪居C栋502</p>
                        <p>联系电话：400-1886-1345</p>
                        <p>邮箱：203841290@qq.com</p>
                        <p>香港闻名生物有限公司版权所有 粤ICP备0754673</p>
                    </div>
                </div>
                <div class="col-lg-2 col-xs-12 col-sm-5 col-md-2">
                    <div class="right_img wow lightSpeedIn bg-purple">
                        <img src="./images/5尚典视频页-_03.png" class="center-block" alt="">
                    </div>
                </div>
            </div>    
        </div>
    </div>

</body>
<!-- 引入jquery文件 -->
<script src="./js/jquery.js"></script>
<!-- 引入bootstrap JavaScript文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入wow.js文件 -->
<script src="./js/wow.min.js"></script>

</html>
<script>
    // 初始化wow.js
    new WOW().init();

    // 自动轮播
    $('.carousel').carousel({
        interval: 3000
    })
</script>